<!-- 任务批阅 -->
<template>
	<a-modal
		fullscreen
		v-model:visible="visible"
		simple
		:footer="false"
		hide-title
		body-class="lsh-modal-body"
		modal-class="lsh-modal"
		:unmount-on-close="true"
    :esc-to-close="false"
	>
		<div class="lsh-box">
			<div class="lsh-left">
				<Mark
					:ref="setMarkRef"
					:info="activeInfo"
					:config="{
						setLable: true
					}"
				/>
			</div>
			<div class="lsh-right">
				<div class="lsh-right-top">
					<MarkFilter />
					<SetScore />
				</div>
				<div class="lsh-btn-box">
					<div class="lsh-btn-item" @click="detailVisible = !detailVisible">
						<svg-icon
							class="lsh-icon"
							:name="detailVisible ? 'close-circle' : 'title-detail'"
						/>
						<span>{{ detailVisible ? '关闭详情' : '原题详情' }}</span>
					</div>
					<div class="lsh-btn-item" @click="hanClose">
						<svg-icon class="lsh-icon" name="exit" />
						<span>退出批阅</span>
					</div>
				</div>
			</div>
			<DetailModal v-model:visible="detailVisible" />
		</div>
	</a-modal>
</template>

<script setup lang="ts">
import Mark from './compoents/mark/index.vue'
import SetScore from './compoents/set-score/index.vue'
import MarkFilter from './compoents/mark-filter/index.vue'
import DetailModal from './compoents/detail-modal/index.vue'
import { useMarkStore } from '@/store/modules/mark'
import { storeToRefs } from 'pinia'
import { addLastRemark, getLastRemark } from '@/api/mark'
const visible = defineModel('visible')
const detailVisible = ref(false)
const { activeInfo} = storeToRefs(useMarkStore())
const { setMarkRef, init,clear } = useMarkStore()
const hanClose = async () => {
	try {
		await addLastRemark({
			lastQuesitonId: activeInfo.value.questionId,
			lastType: activeInfo.value.tabsKey === 'user' ? 0 : 1,
			lastUser: activeInfo.value.userId,
			taskId: activeInfo.value.taskId
		})
	} catch (error) {
	} finally {
		clear();
		detailVisible.value = false
		visible.value = false
	}
}
defineExpose({
	open: async (data: { userId?: string; taskId: string }) => {
		activeInfo.value.taskId = data.taskId
		try {
			if (data.userId) {
				activeInfo.value.userId = data.userId
			} else {
				//如果没有指定用户id，则获取上次批阅的信息；
				const res = await getLastRemark({ taskId: activeInfo.value.taskId })
				if (res.data?.lastUser) {
					activeInfo.value.userId = res.data.lastUser
					activeInfo.value.questionId = res.data.lastQuesitonId
					activeInfo.value.tabsKey =
						res.data.lastType === 0 ? 'user' : 'question'
				}
			}
		} catch (error) {
		} finally {
			visible.value = true
			init()
		}
	}
})
</script>
<style scoped lang="less">
@boxStyle: {
	border-radius: 16px;
	background: #fff;
	/* 卡片投影 */
	box-shadow: 0px 0px 8px 0px rgba(0, 101, 255, 0.06);
};
@gap: 6px;
.lsh-box {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 6px;
	background: #edf1f7;
	padding: 6px;
	position: relative;
	.lsh-left {
		flex: 1;
		height: 100%;
		transform: translateZ(0); /* 强制启用硬件加速 */
		overflow: hidden;
		position: relative;
	}
	.lsh-right {
		height: 100%;
		width: fit-content;
		display: flex;
		flex-direction: column;
		gap: @gap;
		overflow: hidden;
		width: 304px;

		.lsh-right-top {
			display: flex;
			flex: 1;
			flex-direction: column;
			gap: @gap;
			overflow: hidden;
		}

		.lsh-btn-box {
			flex-shrink: 0;
			@boxStyle();
			padding: 4px;
			height: fit-content;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			gap: 1px;
			.lsh-btn-item {
				color: #474f59;
				height: 44px;
				font-size: 16px;
				cursor: pointer;
				border-radius: 12px;
				padding: 12px 0;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				font-family: 'PingFang SC';
				font-size: 14px;
				font-weight: 400;
				line-height: 1;
				user-select: none;
				&:hover {
					background: #edf1f7;
					color: rgba(85, 124, 167, 1);
					.lsh-icon {
						color: rgba(85, 124, 167, 1);
					}
				}
				.lsh-icon {
					font-size: 16px;
					color: rgba(121, 130, 143, 1);
				}
				&:nth-child(n + 2) {
					position: relative;
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: -1px;
						transform: translateY(-50%);
						width: 1px;
						height: 8px;
						background-color: #e1e5eb;
					}
				}
			}
		}
	}
}
</style>
<style lang="less">
.lsh-modal {
	padding: 0;
	.lsh-modal-body {
		padding: 0 !important;
		height: 100%;
	}
}
</style>
